<template>
	<view class="search-result" :style="{paddingTop: top + 'px'}">
		<block v-if="show">
			<view class="search-result-filter" v-if="!image">
				<view class="search-result-input">
					<input type="text" v-model="form.keyword" confirm-type="search" placeholder="请输入关键字搜索"
						placeholder-class="place" @confirm="search" />
					<u-icon name="close-circle-fill" color="#A4A4A4" size="35" @click="clearKeyword" v-if="form.keyword"></u-icon>
				</view>
				<view class="search-result-function">
					<pt-small-function :Multiple="true" :showClass="true" :spaceID="form.space_id" :classID="form.class_id"
						:styleID="form.style_id" :classPopList="class_list" :stylePopList="style_list" :spacePopList="space_list"
						:sortPopList="sort_list" :typeIndexProps="0" @clickItem="clickItem" @changeType="changeType">
					</pt-small-function>
				</view>
			</view>
			<view class="search-result-img" v-if="image">
				<image :src="image" mode="aspectFill"></image>
				图片相关搜索结果
			</view>
			<view class="search-goods-list">
				<block v-if="goods_list.length">
					<pt-product-items :isBig="isBig" isWaterfall :object="{goods_list: goods_list}" :showSort="false"
						@GoInfoAddFoot="GoInfoAddFoot" :isLogin="isLogin">
					</pt-product-items>
				</block>
				<pt-nothing text="没有更多商品了，为您推荐以下相似商品" bgColor="#FFF"
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1" v-if="noMore">
				</pt-nothing>
			</view>
			<view class="search-recomment" v-if="noMore && recommentList.length">
				<view class="search-recomment-tit">为您推荐</view>
				<block v-if="recommentList.length">
					<pt-product-items :object="{goods_list: recommentList}" :showSort="false"
						:isLogin="isLogin"></pt-product-items>
				</block>
				<pt-nothing text="暂无推荐商品" bgColor="#FFF" v-if="recommentNoMore && !recommentList.length"
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<view style="margin: 0 -30rpx;">
				<pt-loading-more v-if="isLoading"></pt-loading-more>
				<pt-nomore v-if="recommentNoMore && recommentList.length"></pt-nomore>
			</view>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				top: 0,
				image: '',
				form: {
					keyword: '',
					class_id: '',
					style_id: '',
					space_id: '',
					order_by: '',
					page: 0,
					asc: 2
				},
				isBig: false,
				goods_list: [],
				noMore: false,
				recommentList: [],
				recommentPage: 0,
				isLoading: false,
				recommentNoMore: false,
				sort_list: [{
					sort_id: 1,
					sort_name: '综合',
					selected: false
				}, {
					sort_id: 2,
					sort_name: '上新',
					selected: false
				},
				// {
				// 	sort_id: 3,
				// 	sort_name: '人气',
				// 	selected: false
				// }, 
				{
					sort_id: 4,
					sort_name: '价格',
					selected: false
				}],
				class_list: [],
				space_list: [],
				style_list: [],
				isLogin: false
			};
		},
		onShareAppMessage() {
			let keyword = this.form.keyword ? this.form.keyword : ''
			return {
				title: this.form.keyword ? this.form.keyword : '所有商品,供您选择',
				path: 'pages/search/search-result?keyword=' + keyword
			}
		},
		onLoad(options) {
			if (options.url) {
				this.image = options.url
				uni.setNavigationBarTitle({
					title: '图片搜索结果'
				})
				this.getGoodsImageSearch()
			} else {
				if (options.keyword) {
					uni.setNavigationBarTitle({
						title: options.keyword + '-搜索结果'
					})
					this.form.keyword = options.keyword
				}
				if (options.space_id) {
					this.form.space_id = options.space_id
				}
				if (options.class_id) {
					this.form.class_id = options.class_id
				}
				if (options.style_id) {
					this.form.style_id = options.style_id
				}
				this.getGoodsSearchList()
				this.getClassList()
			}
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
		},
		methods: {
			getClassList(type) {
				this.$u.api.category_list({
					space_id: this.form.space_id
				}).then(res => {
					if (type) {
						this.class_list = res.datas.class_list
						return
					}
					this.class_list = res.datas.class_list
					this.style_list = res.datas.style_list
					this.space_list = res.datas.space_list
				})
			},
			clickItem(e) {
				if (e.sort !== 'sort') {
					this.form.order_by = e.sort
				} else {
					this.form.order_by = 'sort'
				}
				this.form.style_id = e.style_id != 0 ? e.style_id : ''
				this.form.space_id = e.space_id != 0 ? e.space_id : ''
				this.form.class_id = e.class_id != 0 ? e.class_id : ''
				if (e.asc) {
					this.form.asc = e.asc
				} else {
					this.form.asc = 2
				}
				this.noMore = false
				this.form.page = 0
				this.goods_list = []
				this.getGoodsSearchList()
				this.getClassList(1)
			},
			getGoodsImageSearch() {
				let data = {
					limit: 30,
					page: this.form.page,
					url: this.image
				}
				this.$u.api.GoodsImageSearch(data).then(res => {
					this.show = true
					if (res.datas.data.length <= 30) {
						res.datas.data.forEach(item => {
							this.goods_list.push(item)
						})
						this.noMore = true
						this.getOtherGoods()
					}
				})
			},
			getOtherGoods() {
				this.$u.api.SearchRecommendList({
					page: this.recommentPage,
					order_by: 'add_time'
				}).then(res => {
					this.isLoading = false
					if (res.datas.data.length) {
						res.datas.data.forEach(item => {
							this.recommentList.push(item)
						})
					} else {
						this.recommentNoMore = true
					}
				})
			},
			getGoodsSearchList() {
				let data = {
					keyword: this.form.keyword,
					class_id: this.form.class_id,
					style_id: this.form.style_id,
					space_id: this.form.space_id,
					order_by: this.form.order_by,
					page: this.form.page,
					asc: this.form.asc
				}
				this.$u.api.GoodsSearchList(data).then(res => {
					this.show = true
					if (res.datas.list.length) {
						if (res.datas.list.length < 10) {
							this.noMore = true
							this.getOtherGoods()
						}
						res.datas.list.forEach(item => {
							this.goods_list.push(item)
						})
					} else {
						this.noMore = true
						this.getOtherGoods()
					}
					this.$nextTick(() => {
						uni.createSelectorQuery().select('.search-result-filter').boundingClientRect(res => {
							if (res) {
								this.top = res.height
								// #ifdef APP-PLUS || MP
								this.top = res.height + 15
								// #endif
							}
						}).exec()
					})
				})
			},
			clearKeyword() {
				this.form.keyword = ''
				uni.setNavigationBarTitle({
					title: '商品列表'
				})
				uni.redirectTo({
					url: '/pages/search/search-result'
				})
			},
			changeType(e) {
				if (e == 1) {
					this.isBig = true
				} else {
					this.isBig = false
				}
				if (uni.getStorageSync('userInfo')) {
					let where = e == 1 ? '搜索-列表-大图' : '搜索-列表-小图'
					this.addFoot(where)
				}
			},
			search() {
				this.goods_list = []
				this.form.page = 0
				this.noMore = false
				this.getGoodsSearchList()
			},
			GoInfoAddFoot() {
				if (uni.getStorageSync('userInfo')) {
					this.addFoot('搜索-列表-详情页')
				}
			},
			addFoot(where) {
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).store_id : '',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			}
		},
		onReachBottom() {
			if (this.noMore) {
				this.recommentPage++
				this.isLoading = true
				this.getOtherGoods()
			}
			if (!this.noMore) {
				this.form.page++
				this.isLoading = true
				this.getGoodsSearchList()
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.search-result {
		padding: 30rpx 30rpx 0;

		// background-color: #FFF;
		.search-result-filter {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;
			padding: 30rpx 30rpx 0;
			background-color: #FFF;
			border-bottom: solid 2rpx #F4F4F4;
		}

		.search-result-input {
			border-bottom: solid 5rpx #141414;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;

			input {
				flex: 1;
				min-width: 0;
				font-size: 32rpx;
			}

			.place {
				color: #A4A4A4;
			}
		}

		.search-result-img {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #999;
			padding-top: 30rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}
		}

		.search-goods-list,
		.search-recomment {
			/deep/ .product-items {
				border-bottom: none;
			}
		}

		.search-recomment {
			border-top: 20rpx solid #F4F4F4;
			margin: 0 -30rpx;
			padding: 0 30rpx;

			.search-recomment-tit {
				padding: 50rpx 0;
				text-align: center;
				font-size: 42rpx;
			}

			.search-recomment-tit::before {
				margin-right: 30rpx;
			}

			.search-recomment-tit::after {
				margin-left: 30rpx;
			}

			.search-recomment-tit::before,
			.search-recomment-tit::after {
				content: '';
				display: inline-block;
				vertical-align: middle;
				width: 10rpx;
				height: 10rpx;
				background-color: #FE9B26;
				transform: rotate(45deg);
			}
		}
	}
</style>